
<template>
	<div id="me">
		<van-nav-bar
			title="我的"
			
			fixed
			
		/>
		<van-notice-bar		
			left-icon="volume-o"
			text="到云App -------  copyright© 七枫  ------ 产品开发中 ----- 尽请期待"
		/>
		<van-cell-group >
			<van-row type="flex" justify="center">
				<van-col span="4">
					<van-image
						round
						width="70"
						height="70"
						src="https://img01.yzcdn.cn/vant/cat.jpeg"
				/></van-col>
				<van-col span="18" offset="2">
					
					
					<!-- <van-cell value="" label="200327123" size="large" is-link center> -->
					<van-cell :value="meExperience"  size="large" is-link center @click="$router.push({name: 'personInfo'})">
						<!-- 使用 title 插槽来自定义标题 -->
						<template #title >
							<span class="custom-title"> {{userInfo.name}} </span>
							<van-tag type="success">{{roleId}}</van-tag>
							
							<!-- <van-tag type="primary" size="large">{{userInfo.experience}}/{{userInfo.allExperience}}</van-tag> -->
						</template>
						
					</van-cell>
				</van-col>
			</van-row>
		</van-cell-group>
		<van-cell-group title=" ">
			
			<!-- <van-cell title="系统通知" value="" is-link>
				<template #title>
					<span class="custom-title">系统通知 </span>
					<van-tag type="danger">New</van-tag>
				</template>
			</van-cell> -->
			<van-cell title="修改密码" value="" is-link  @click="onClickChangePsw"/>
			<van-cell title="关于我们" value="" is-link @click="$router.push({name: 'aboutMe'})" />
			<van-cell title="用户手册" value="" is-link @click="$router.push({name: 'man'})"/>

			<!-- <van-cell title="检查更新" value="" is-link>  
				<template #title>
					<span class="custom-title">检查更新 </span>
					<van-tag type="danger">New</van-tag>
				</template>
			</van-cell> -->
			<!-- <van-cell title="分享App给好友" @click="showShare = true"  value="" is-link/>
			<van-share-sheet
				v-model="showShare"
				title="立即分享给好友"
				:options="options"
				@select="onShare"
			/> -->
		</van-cell-group>
		
		<div style="margin: 20px;">
			<van-button round block type="info" @click="onLogout">退出当前账户</van-button>
		</div>

		
		
		
	</div>
</template>

<script>
	// import { Toast } from 'vant';
	import {logout} from '../../api/logout.js';
	export default {
		name: 'me',
		components: {

		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
		},
		computed: {
			roleId() {
				return this.userInfo.roles[0] ==='TEACHER'?'教师':'学生';
			},
			meExperience() {
				return  this.userInfo.roles[0] ==='STUDENT'?'经验值:'+this.userInfo.experience+'/'+this.userInfo.allExperience:'';
			},
		},
		data() {
			return {
				// showShare: false, //  分享组件用的变量
				// options: [  //  分享组件用的变量
				// 	{ name: '微信', icon: 'wechat' },
				// 	{ name: '微博', icon: 'weibo' },
				// 	{ name: '复制链接', icon: 'link' },
				// 	{ name: '分享海报', icon: 'poster' },
				// 	{ name: '二维码', icon: 'qrcode' },
				// ], // options 和 showShare分享组件使用
				
				userInfo: {
					name: 'z',
					id: -1,
					authorityIds: [],
					roles: [],
					token: ''
				} 
			};
		},
		methods: {
			// onShare(option) {  
			// 	Toast(option.name);
			// 	this.showShare = false;
			// }, // 分享
			// onSettings() {  // 转跳设置页
				
			// 	this.$router.push({name:'settings'});
			// }
			onClickChangePsw() {
				this.$router.push({name:'changePsw'});
			},	
			async onLogout() {  // 退出
				// 清本地存储
				
				await logout().then(res => {
					if(res.data.code === 0 ) {
						console.log("退出成功");
						
					}
				}).catch(err => {
					console.log(err);
				});
				localStorage.removeItem('userInfo');
				localStorage.removeItem('courseInfo');
				localStorage.removeItem('auth_token');

				this.$router.push({name: 'login'});
			},		
		},
		
	}
</script>

<style>
	.van-cell--large {
			padding-top: 30px;
			padding-bottom: 12px;
	}
</style>
